<template>
	<view class="formList position-r pg-30" >
		<view class="d-flex  aling-centen " >
			<image class="lefticon " :src="leftIconPath" mode=""></image>
			<view class="flex-grow1 ml-30">
				<input 
					:type="type" 
					@input="oninput" 
					@blur="actve=false" 
					@focus="actve=true" 
					:value="value" 
					:disabled="disabled" 
					:maxlength='maxlength'
					:placeholder="placeholder"/>
			</view>
			<image v-if='rightIconStatus' @tap='rightIconEvent' class="righticon " :src="rightIconPath" mode=""></image>
		</view>
		<view v-if="borderStatus" class="list-border" :class="{actve}"></view>
	</view>
</template>
<script>
	export default {
		name:'x-form-list',
		props:{
			leftIconPath:{ //左边图标 最好写相对路径
				type:String,
				default:'text'
			},
			rightIconPath:{ // 右边图标
				type:String,
				default:''
			},
			rightIconStatus:{ // 是否显示右边图标
				type:Boolean,
				default:false
			},
			type:{
				type:String,
				default:'text'
			},
			maxlength:{
				type:Number,
				default:140
			},
			disabled:{ // input是否禁用
				type:Boolean,
				default:false
			},
			placeholder:{ // input占位文字
				type:String,
				default:''
			},
			borderStatus:{ // 是否显示下边框
				type:Boolean,
				default:true
			},
			value: { // 接收传递的v-model input输入的值，通过c-model返回
				type: [String, Number],
				default: ''
			},
		},
		data() {
			return {
				actve:false
			}
		},
		methods: {
			// 实现双向绑定
			oninput(event){
				let value = event.detail.value;
				this.$emit('input', value);
			},
			rightIconEvent(){
				this.$emit('rightIconEvent')
			}
		}
	}
</script>
<style lang="scss">
	.formList{
		.lefticon{
			width: 50rpx;
			height: 50rpx;
		}
		.righticon{
			width: 45rpx;
			height: 45rpx;
		}
		.list-border{
			position: absolute;
			bottom: 0;
			left: 110rpx;
			right: 30rpx;
			border-bottom: 1px solid #ddd;
		}
		.list-border::after{
			position: absolute;
			bottom: 0;
			content: '';
			display: inline-block;
			width: 0%;
			border-bottom: 1px solid red;
			transition: 0.4s;
		}
		.actve::after{
			width: 100%;
		}
	}
</style>